<template>
  <el-scrollbar class="standard-detail full-height">
    <el-form v-if="postForm" ref="standardForm" :model="postForm" label-width="80px" label-position="left" >
      <el-form-item :label="$t('standard.title')">
        <el-input v-model="postForm.Title" class="line-input form-item-width" />
      </el-form-item>
      <el-form-item :label="$t('standard.version')">
        <el-input v-model="postForm.Version" class="line-input form-item-width" />
      </el-form-item>
      <el-form-item :label="$t('standard.env')">
        <el-tag
          v-for="env in postForm.EnvList"
          :key="env"
          closable
          :disable-transitions="false"
          size="small"
          class="margin-right-10"
          @close="onCloseEnv(env)"
        >
          {{ env }}
        </el-tag>
        <el-input
          v-if="inputEnvVisible"
          ref="saveTagInput"
          v-model="inputEnvValue"
          class="line-input margin-left-10"
          size="mini"
          style="width: 80px"
          @keyup.enter.native="onConfirmEnv"
          @blur="onConfirmEnv"
        />
        <el-button v-else class="margin-right-10" size="mini" @click="onShowEnvInput">+ Add Env</el-button>
      </el-form-item>
      <el-form-item :label="$t('standard.status')">
        <el-radio-group v-model="postForm.Status" class="form-item-width">
          <el-radio-button label="Show">{{ $t('standard.show') }}</el-radio-button>
          <el-radio-button label="Hide">{{ $t('standard.hide') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Prop List">
        <standard-prop-tree :standard="postForm" ref="childItem" />
      </el-form-item>
    </el-form>
    <div class="action-container">
      <el-button type="primary" @click="onSubmit" > {{ $t('standard.submit') }} </el-button>
    </div>
  </el-scrollbar>
</template>

<script>
import { createStandard, updateStandard } from '@/api/standard'
import StandardPropTree from '@/views/standard/components/StandardPropTree'

export default {
  name: 'StandardDetail',
  components: { StandardPropTree },
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      postForm: null,
      inputEnvVisible: false,
      inputEnvValue: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        this.initPostForm()
      },
      deep: true,
      immediate: true
    },
    postForm() {
      this.$emit('input', this.postForm)
      this.$emit('change', this.postForm)
    }
  },
  created() {
    this.initPostForm()
  },
  methods: {
    initPostForm() {
      this.postForm = this.value
      if (this.postForm && !this.postForm.EnvList) {
        this.$set(this.postForm, 'EnvList', [])
      }
      if (this.postForm && !this.postForm.ItemList) {
        this.$set(this.postForm, 'ItemList', [])
      }
    },
    onCloseEnv(env) {
      this.postForm.EnvList.splice(this.postForm.EnvList.indexOf(env), 1)
    },
    onShowEnvInput() {
      this.inputEnvVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    onConfirmEnv() {
      if (this.inputEnvValue) {
        this.postForm.EnvList.push(this.inputEnvValue)
        this.inputEnvValue = ''
        this.inputEnvVisible = false
      }
    },
    onSubmit() {
      this.$refs['standardForm'].validate(async(valid) => {
        if (valid) {
          try {
            const data = this.isEdit ? await updateStandard(this.postForm) : await createStandard(this.postForm)
            if (data.Message === 'ok') {
              this.$notify({
                title: this.$t('standard.success'),
                message: this.isEdit ? this.$t('standard.editSuccessAlert') : this.$t(
                  'standard.addSuccessAlert'),
                type: 'success',
                duration: 2000
              })
              this.$refs.childItem.onSubmit(data.Data.Id)
              if (!this.isEdit) {
                this.$router.push({ name: 'StandardPanel', query: { id: data.Data.Id }})
              }
            }
          } catch (e) {
            console.log(e)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-width {
  width: 500px;
}
</style>
